<template>
  <el-row class="container">
    <admin-header></admin-header>
    <el-col :span="24" class="main">
      <aside :class="collapsed ? 'menu-collapsed' : 'menu-expanded'">
        <!--导航菜单-->
        <el-menu :default-active="$route.fullPath" :unique-opened="true" router v-show="!collapsed">
          <template v-for="(item, index) in $router.options.routes">
            <template v-if="!item.hidden">
              <el-submenu v-if="item.children" :key="index" :index="index + ''">
                <template slot="title">{{ item.meta.title }}</template>
                <div v-for="(child, index) in item.children" :index="child.path" :key="child.path">
                  <template v-if="child.children && !child.hidden">
                    <el-submenu :index="index + ''">
                      <template slot="title">{{ child.meta.title }}</template>
                      <el-menu-item v-for="grandson in child.children" :index="`${grandson.path}`" :key="grandson.path">
                        <span v-if="!grandson.hidden"> {{ grandson.meta.title }}</span>
                      </el-menu-item>
                    </el-submenu>
                  </template>
                  <el-menu-item :index="`${child.path}`" :key="child.path" v-if="!child.children && !child.hidden">{{ child.meta.title }}</el-menu-item>
                </div>
              </el-submenu>
              <el-menu-item v-if="!item.children" :key="index" :index="item.path">{{ item.meta.title }}</el-menu-item>
            </template>
          </template>
        </el-menu>
      </aside>
      <section class="content-container">
        <el-col :span="24" class="breadcrumb-container">
          <admin-breadcrumb></admin-breadcrumb>
        </el-col>
        <el-col :span="24" class="content-wrapper pad-t-30 pad-b-30">
          <transition name="fade" mode="out-in">
            <router-view></router-view>
          </transition>
        </el-col>
      </section>
    </el-col>
  </el-row>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import AdminHeader from "../components/AdminHeader.vue";
import Breadcrumb from "../components/Breadcrumb.vue";

// declare function require(any): string;
const sysUserAvatar = require("../assets/images/common/user.png");
@Component({
  components: {
    "admin-header": AdminHeader,
    "admin-breadcrumb": Breadcrumb
  }
})
export default class Home extends Vue {
  private collapsed: boolean = false;
  private loading: boolean = false; //菜单loading
  private menuTree: any = null; //过滤后的菜单树
  private userId: number = 22;
  //methods
  created() {
    this.getMenu();
  }
  //获取菜单
  getMenu() {
    let params: object = {
      userId: this.userId
    };
    this.loading = true;
    this["$api"].authority
      .findMenuZtree(params)
      .then((res: any) => {
        if (res.data.code === this.$config.RET_CODE.SUCCESS_CODE) {
          this.menuTree = this.filterTree(res.data.data);
          this.loading = false;
        } else {
          this.$message.error(res.data.msg);
          this.loading = false;
        }
      })
      .catch((err: any) => {
        console.log(err);
        this.loading = false;
      });
  }
  filterTree(data: Array<object>) {
    data.forEach((v: any) => {
      v.children = v.children && v.children.filter((item: any) => item.type !== 1); //返回type不等于1 0是菜单 1是按钮

      if (v.children && v.children.length) {
        this.filterTree(v.children);
      } else {
        delete v.children;
      }
    });
    return data;
  }
}
</script>
<style scoped lang="less">
@import "../assets/less/home.less";
</style>
